<!--
	网站神一样的业务,在detail页面向下拖动页面吗，滚动条在起初变化的一定范围内，假设60px-140px时，有一个悬浮的头部显示出来
-->
<template>
	<div class="detail-head">
		<!-- 默认显示的返回按钮 -->
		<router-link
      		tag="div"
      		to="/"
      		class="header-abs"
      		v-show="isShowAbs">
      		<div class="iconfont header-abs-back">&#xe624;</div>
    	</router-link>
    	<!-- 渐显的头部 -->
    	<div
      		class="header-fixed"
      		v-show="!isShowAbs"
      		v-bind:style="opacityStyle"
   			>
      		<router-link to="/">
        		<div class="iconfont header-fixed-back">&#xe624;</div>
      		</router-link>
      		<span>景点详情</span>
    	</div>
	</div>
</template>


<script type="text/javascript">
export default{
	name:"DetailHead",
	data(){
		return {
			isShowAbs:true,
			opacityStyle:{
				opacity:0
			}
		}
	},
	// mounted(){
	// 	window.addEventListener('scroll', this.handleScroll)  //监控页面滚动，最重要的部分
	// },
	// unmounted () {
 //    	window.removeEventListener('scroll', this.handleScroll)
 //  	},
  	methods:{
  		handleScroll(){
  			const top = document.documentElement.scrollTop                //这里是有问题的，真机需要使用document.body.scrollTop
		    if (top > 60) {
		        let opacity = top / 140
		        opacity = opacity > 1 ? 1 : opacity
		        this.opacityStyle = { opacity }
		        this.isShowAbs = false
		    } else {
		    	this.isShowAbs = true
		    }
  		}
  	},
  	activated(){  
  		//console.log("activated");
  		document.body.scrollTop=0;                            //这个真机有效，下面的documentElement.scrollTop对真机无效
      document.documentElement.scrollTop=0;                 //本地开发调试，浏览器模拟有效
      window.addEventListener('scroll', this.handleScroll)  //监控页面滚动，最重要的部分
  	},
  	deactivated(){											  //全局事件的解绑，如果这里不解绑因为vue spa这个事件在其他页面滚动时候也会一种存在
  		//console.log("deactivated");     
  		window.removeEventListener('scroll', this.handleScroll);
  	}
}	
</script>

<style type="text/css">
/* 下面的css是从老师的stylus翻译过来的，我实在不喜欢那东西 */
.header-abs{
	position: absolute;left: 0.2rem;top: .2rem;width: .8rem;height: .8rem;
	line-height: .8rem;border-radius: 0.4rem;text-align: center;background: rgba(0, 0, 0, .5);
}
.header-abs .header-abs-back{
	color: #fff;font-size: .4rem;
}
.header-fixed{
	z-index: 2;position: fixed;top: 0;left: 0;right: 0; height:.86rem;line-height: .86rem;
    text-align: center;color: #fff; background:#00bcd4;
    font-size: .32rem;
}
.header-fixed .header-fixed-back{
	position: absolute;top: 0; left: 0; width: .64rem; 
	text-align: center;font-size: .4rem; color: #fff;
}
</style>